<template>
  <div>
    <el-card class="box-card">
      <p style="font-size: 18px">我的试卷</p>
    </el-card>
    <el-card class="box-card" style="margin: 15px 0">
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop=""
          label="试卷名称">
          <template slot-scope="scope">
            <router-link :to="'/exercise/testanswer/' + scope.row.id + '/' + scope.row.name"><span style="color: blue" size="small" type="text">{{ scope.row.name }}</span></router-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="questNum"
          label="题量"
          width="180"/>
        <el-table-column
          prop="doTestNum"
          label="答卷次数"/>
        <el-table-column
          prop="score"
          label="最近得分"/>
        <el-table-column
          :formatter="toTime"
          prop="endTime"
          label="上次答卷时间"/>
        <el-table-column
          prop=""
          label="查看">
          <template slot-scope="scope">
            <el-button size="small" type="text" @click="showHistory(scope.row.id)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        :visible.sync="dialogVisible"
        :before-close="handleClose"
        title="答题历史记录"
        width="60%">
        <el-table
          :data="historyData"
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="180"/>
          <el-table-column
            :formatter="toTime"
            prop="startTime"
            label="开始时间"
            width="180"/>
          <el-table-column
            :formatter="toTime"
            prop="endTime"
            label="交卷时间"/>
          <el-table-column
            prop="time"
            label="答题时间（分）"/>
          <el-table-column
            prop="score"
            label="得分"/>
          <el-table-column
            prop=""
            label="查看">
            <template slot-scope="scope">
              <router-link :to="'/exercise/testresult/' + scope.row.testId + '/' + scope.row.handPaperId+ '/' + scope.row.name"><span size="small" type="text">查看</span></router-link>
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button style="display: none" @click="dialogVisible = false" >取 消</el-button>
          <el-button style="display: none" type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      <el-pagination
        :page-size="size"
        :total="total"
        background
        layout="prev, pager, next"
        @current-change="sizeChange"/>
    </el-card>
  </div>
</template>
<script>
import axios from 'axios'
import Unix from '@/utils/unix'
export default {
  data() {
    return {
      examType: '',
      page: 1,
      total: 0,
      dialogVisible: false,
      size: 10,
      historyData: [],
      tableData: []
    }
  },
  mounted() {
    this.examType = sessionStorage.getItem('EXERCISE_TYPE')
    this.queryList()
  },
  methods: {
    queryList() {
      axios.get(`/myTestInfo/${this.examType}/${this.page}/${this.size}`).then((res) => {
        if (res.success) {
          this.tableData = res.data
          this.total = res.total
        }
      })
    },
    sizeChange(page) {
      this.page = page
      this.queryList()
    },
    toTime(row, column) {
      const date = row[column.property]
      return Unix.unixToTime(date)
    },
    handleClose() {
      this.dialogVisible = false
    },
    /**
     * 获取答题历史记录
     */
    showHistory(id) {
      this.dialogVisible = true
      axios.get(`/doTestHistoryInfo/${id}`).then(res => {
        if (res.success) {
          this.historyData = res.data
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

</style>
